import { Link } from "react-router-dom"
import { useNavigate } from "react-router-dom"

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>
            <h1>Login</h1>
            {/* 声明式 导航 */}
            <Link to={'/'}>点击 跳转到Home页</Link>
            <p />
            {/* 编程式 导航 */}
            <button onClick={() => navigate('/')}>点击 跳转到Home页</button>
            {/* 查询参数 传参 */}
            <button onClick={() => navigate('/?id=1001&name=')}>点击 跳转到Home页 并传递参数searchParams</button>
            {/* 动态路由 传参 */}
            <button onClick={() => navigate('/1001/jack')}>点击 跳转到Home页 并传递参数params</button>
        </div>
    )
}

export default Login

// searchParams 可以传递空字符串 params动态路由不能传递空字符串
